<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/login.css">
  <style>
      .inputWidth{
        width: 200px;
        display: inline-block;
      }

      .spanspan{
        color:red;
        font-size: 20px;
      }
      .cover{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
      }
  </style>
</head>
<body>

    <div class="jumbotron">
      <h1>欢迎注册 NZ2002 SHOP</h1>
      <div class="login">
        <div class="form-horizontal">
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input name="name" type="text" class="form-control inputWidth"  placeholder="用户名">
              <span name="spanName" class="spanspan"></span>
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input name="pwd1" type="password" class="form-control inputWidth"  placeholder="密码">
              <span name="spanPwd" class="spanspan"></span>
            </div>
          </div>

          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-10">
              <input name="pwd2" type="password" class="form-control inputWidth"  placeholder="确认密码">
              <span class="spanspan"></span>
              
            </div>
          </div>

          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-10">
              <input name="vc" type="text" class="form-control inputWidth" id="ac" placeholder="验证码"> <a id="sc"></a><br>
              <span name="spanVC" class="spanspan"></span>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button name="reg" class="btn btn-default">注册</button>
            </div>
          </div>
        </div>

        <div name="result"></div>
      </div>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
    <script>
      // 1, 生成随机验证码
      $('#sc').html( setVC() ).click(function(){ $('#sc').html( setVC() ) })

      // 2, 账号input 添加 change 事件
      $('[name="name"]').change(function(){
        // 发送 ajax请求 验证账号是不是重复
        // 调用 async封装的函数程序
        userNameAuthentication();
      })

      // 3, 注册button按钮 点击 执行注册操作
      $('[name="reg"]').click(function(){
        // 调用 async 封装的函数 执行注册操作
        setRegister();
      })


      // async 封装验证用户用函数
      async function userNameAuthentication(){
        // 获取账号input中输入的数据
        let name = $('[name="name"]').val();
        // 根据数据 发送请求
        // 变量res中存储的是 
        const res = await myPromiseAjax('../server/goods_select.php' , 'post' , { userName : name } , 'json') ;
        console.log(res);
        // 根据结果 向页面写入提示信息
        if( res.result === 0 ){
          $('[name="spanName"]').html('<span style="color:red">用户名重复不能使用</span>')
        }else if( res.result === 1 ){
          $('[name="spanName"]').html('<span style="color:blue">用户名可以使用</span>')
        }

      }

      // async 封装注册功能函数
      async function setRegister(){
        // 获取 账号 密码1 密码2 验证码数据 验证码内容
        let name = $('[name="name"]').val();
        let pwd1 = $('[name="pwd1"]').val();
        let pwd2 = $('[name="pwd2"]').val();
        let vc1 = $('[name="vc"]').val();
        let vc2 = $('#sc').html();

        // 如果 两个密码不同 写入提示信息 终止之后程序的执行
        // 如果 密码相同 删除错误提示信息
        if( pwd1 !== pwd2 ){
          // 两个密码不同 写入错误提示信息
          $('[name="spanPwd"]').html('<span style="color:red">两个密码不同</span>');
          // 写入新的验证码
          $('#sc').html( setVC() );
          // 触发 return 终止之后程序的执行
          // 也就是之后的ajax请求 就不发送了
          return ;
        }else{
          // 两个密码相同 写入 空字符串 覆盖之前写入的提示信息
          $('[name="spanPwd"]').html('');
        }

        // 验证码 如果 区分字符的大小写 直接 比较判断 
        // 如果不区分字符大小写 字符串的大小写统一
        if( vc1.toLowerCase() !== vc2.toLowerCase() ){
          // 如果两个验证码不同 写入错误提示信息
          $('[name="spanVC"]').html('<span style="color:red">验证码不同</span>');
          // 写入新的验证码
          $('#sc').html( setVC() );
          // 触发 return 终止之后程序的执行
          // 也就是之后的ajax请求 就不发送了
          return ; 
        } else {
          // 如果两个验证码相同 写入空字符串 覆盖错误提示信息
          $('[name="spanVC"]').html('');
        }

        // 发送ajax请求
        const res = await myPromiseAjax('../server/goods_reg.php' , 'post' , {userName:name , userPwd:pwd1} , 'json');                                              
        console.log( res );

        // 根据结果动态生成页面
        // 写入内容 5秒后跳转 首页面 点击 超链接 跳转 登录页
        if ( res.result === 1 ) {
          // 注册成功 5秒跳转效果
          $('[name="result"]').html('<h1 style="color:blue">注册成功,5秒跳转首页面,<a href="./login.html">点击跳转登录页</a></h1>');                                        

          let num = 5 ;
          let time = setInterval(function(){
            num--;
            $('[name="result"]').html(`<h1 style="color:blue">注册成功,${num}秒跳转首页面,<a href="./login.html">点击跳转登录页</a></h1>`);                                        

            if( num === 1 ){
              clearInterval(time);
              window.location.href = './index.html';
            }

          } , 1000 )

        }else if( res.result === 0 ){
          // 注册失败 写入提示信息
          $('[name="result"]').html('<h1 style="color:red">您注册的账号名重复</h1>');
        }
      }


    </script>

    <script>
      /*
        注册页需求
          1,  生成一个随机验证码 写入页面
              实际项目中 是 调用第三方数据接口 
              目前是自己生成一个随机的验证码

          2,  账号input 失去焦点
              发送请求 验证账号是不是已经存在

              向 server/goods_select.php 发送请求
              post方式 
              携带一个参数 键名是 userName
              响应体格式是 json字符串

          3,  点击注册 按钮
              验证 两次密码一致 验证码一致
              发送请求 完成注册功能 

              向 server/goods_reg.php 发送请求
              post方式
              携带二个参数 键名是 userName userPwd
              响应体格式是 json字符串

      */

    </script>
</body>
</html>
